<template>
	<view class="map_box">
		<!-- #ifdef H5-->
		<view id="PublicMap"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<map class="H5_map" :latitude="latitude" :longitude="longitude" :markers="covers" scale="16"></map>
		<!-- #endif -->
		<view class="map_legend">
			<view class="legend_item">
				<image src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"></image>
				<view class="legend_text">案件位置</view>
			</view>
			<view class="legend_item">
				<image src="../../static/city-manage/uni-address.png"></image>
				<view class="legend_text">我的位置</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name: 'publicMap',
		props: ['gdx', 'gdy'],
		data(){
			return {
				GDMap: null,
				//H5
				longitude:'108.99569',
				latitude:'34.20124',
				covers:[],
				marker: null,
			}
		},
		onLoad(){

		},
		mounted(){
			// #ifdef APP-PLUS
			this.longitude = this.gdx;
			this.latitude = this.gdy;
			this.covers.push({
				latitude: this.gdy,
				longitude: this.gdx,
				iconPath: '../../static/city-manage/case.png'
			})
			// #endif
		},
		methods:{
			//初始化地图
			initMap(){
				this.GDMap = new AMap.Map('PublicMap', {
					zoom: 14,
					viewMode: '2D',
					center: [108.99569,34.20124],
					resizeEnable: true,
				});
				this.initPoint(this.gdx, this.gdy);
			},
			//定位
			initPoint(gdx, gdy){
				var icon = new AMap.Icon({
				    size: new AMap.Size(40, 50),    // 图标尺寸
				    //image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',  // Icon的图像
					image: '../../static/city-manage/case.png',
				    imageSize: new AMap.Size(25, 25)   // 根据所设置的大小拉伸或压缩图片
				});
				this.marker = new AMap.Marker({
					icon: icon,
					position: [gdx, gdy],
					offset: new AMap.Pixel(-13, -30)
				});
				this.marker.setMap(this.GDMap);
				this.GDMap.setCenter([gdx, gdy]);// 执行定位
			},
		}
	}
</script>

<style lang="scss">
	.map_box{
		position: relative;
		margin:0 auto;
		width:560rpx;
		height:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
	}
	// #ifdef H5
	#PublicMap{
		width:560rpx;
		height:940rpx;
	}
	.H5_map{
		width:500rpx;
		height:911rpx;
	}
	// #endif
	// #ifdef APP-PLUS
	.H5_map{
		width:510rpx;
		height:917rpx;
	}
	// #endif
	.map_legend{
		box-shadow: #b5cede 0px 0px 10px;
		background: white;
		padding: 10rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 999999;
		.legend_item{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			line-height: 50rpx;
			image{
				width: 30rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>
